div#streamComponent {
    background: #000000;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 95;
}

div#streamComponent video {
    width: 100%;
    height: 100%;
    max-height: 100%;
    z-index: 96;
}

div#streamComponent.size_stretch video {
    object-fit: fill;
}

div#streamComponent.size_zoom video {
    object-fit: cover;
}

div#component_streamcomponent_debug {
    z-index: 97;

    backdrop-filter: blur(20px);
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    right: 0;
    bottom: 0;
    width: 60vw;
    height: 620px;
    overflow-y: auto;
}

div#component_streamcomponent_debug p {
    padding: 5px;
}


div#component_streamcomponent_debug_text {
    height: 500px;
    width: 20vw;
    overflow-y: auto;
    overflow-x: none;
    margin-top: 5px;
    margin-left: 10px;
    margin-bottom: 5px;
    position: absolute;
    top: 10px;
    right: 10px;
}

div#component_streamcomponent_debug_webrtc_jitter, div#component_streamcomponent_debug_webrtc_dropped {
    background: rgba(255, 255, 255, 0.5);
    width: 600px;
    margin-left: 10px;
    margin-bottom: 10px;
}

div#component_streamcomponent_debug.hidden {
    display: none;
}

div#component_streamcomponent_gamebar {
    z-index: 98;

    backdrop-filter: blur(20px);
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

div#component_streamcomponent_gamebar.hidden {
    opacity: 0;
}

div#component_streamcomponent_gamebar div#component_streamcomponent_gamebar_menu {
    padding-top: 13px;
    padding-left: 20px;
    display: flex;
    gap: 20px;
}

div#component_streamcomponent_loader {
    display: flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    z-index: 98;
    top: 70px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
}

div#component_streamcomponent_loader.hidden {
    display: none;
}

/* uPlot css */
.uplot, .uplot *, .uplot *::before, .uplot *::after {box-sizing: border-box;}.uplot {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.5;width: min-content;}.u-title {text-align: center;font-size: 18px;font-weight: bold;}.u-wrap {position: relative;user-select: none;}.u-over, .u-under {position: absolute;}.u-under {overflow: hidden;}.uplot canvas {display: block;position: relative;width: 100%;height: 100%;}.u-axis {position: absolute;}.u-legend {font-size: 14px;margin: auto;text-align: center;}.u-inline {display: block;}.u-inline * {display: inline-block;}.u-inline tr {margin-right: 16px;}.u-legend th {font-weight: 600;}.u-legend th > * {vertical-align: middle;display: inline-block;}.u-legend .u-marker {width: 1em;height: 1em;margin-right: 4px;background-clip: padding-box !important;}.u-inline.u-live th::after {content: ":";vertical-align: middle;}.u-inline:not(.u-live) .u-value {display: none;}.u-series > * {padding: 4px;}.u-series th {cursor: pointer;}.u-legend .u-off > * {opacity: 0.3;}.u-select {background: rgba(0,0,0,0.07);position: absolute;pointer-events: none;}.u-cursor-x, .u-cursor-y {position: absolute;left: 0;top: 0;pointer-events: none;will-change: transform;z-index: 100;}.u-hz .u-cursor-x, .u-vt .u-cursor-y {height: 100%;border-right: 1px dashed #607D8B;}.u-hz .u-cursor-y, .u-vt .u-cursor-x {width: 100%;border-bottom: 1px dashed #607D8B;}.u-cursor-pt {position: absolute;top: 0;left: 0;border-radius: 50%;border: 0 solid;pointer-events: none;will-change: transform;z-index: 100;/*this has to be !important since we set inline "background" shorthand */background-clip: padding-box !important;}.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off {display: none;}